<template>
    <!-- 过程 -->
    <div class="process-cont" v-if="detail.id && +detail.status < 3">
        <flexbox style="width: 100%" justify="space-between">
            <div style="padding: 12px 24px; color: #fff">
                <div>
                    <span>当前阶段：</span>
                    <span v-if="stepStatus === 'productAudit'">{{ stage }}（{{ historyList[historyList.length - 1]?.assigneeName }}）</span>
                    <span v-else-if="stepStatus === 'productChange'">
                        您可以按照评审要求调整需求列表，更新相关文档
                        <a style="color: #fff; text-decoration: underline; margin-left: 8px" @click="handlePreview(1)" v-if="showReviewRecord && !disabled">查看评审记录</a>
                    </span>
                    <span v-else-if="stepStatus === 'devReview'"> {{ stage }}（{{ historyList[historyList.length - 1]?.assigneeName }}） </span>
                    <span v-else>
                        {{ stage }}
                    </span>
                </div>
                <flexbox class="margin-t-8" style="cursor: pointer">
                    <div class="btn-item" @click="handleTabChange(1)">
                        <span class="margin-r-8">关联需求</span>
                        <CheckCircleFilled class="success-color" v-if="isRelatePro" />
                        <CloseCircleFilled class="error-color" v-else />
                    </div>
                    <div class="btn-item margin-l-16" @click="handleTabChange(stepStatus === 'requireOnline' ? 5 : 2)" v-if="relateFileInfo.connectType">
                        <span class="margin-r-8"> {{ relateFileInfo.connectType }} </span>
                        <CheckCircleFilled class="success-color" v-if="relateFileInfo.isUploadFile" />
                        <CloseCircleFilled class="error-color" v-else />
                    </div>
                    <div class="btn-item margin-l-16" @click="handleTabChange(3)" v-if="detail.processStatus >= 3">
                        <span class="margin-r-8">提测方式</span>
                        <LoadingOutlined class="success-color" v-if="!['basicLine', 'outSide'].includes(stepStatus) && detail.pmpTestInformationDTO?.testStatus === 1" />
                        <CheckCircleFilled class="success-color" v-if="detail.autoTest === false || (['basicLine', 'outSide'].includes(stepStatus) ? detail.pmpTestInformationDTO?.testStatus : [2, 3, 4].includes(detail.pmpTestInformationDTO?.testStatus))" />
                        <CloseCircleFilled class="error-color" v-if="detail.autoTest === null" />
                    </div>
                    <!-- 上线节点 -->
                    <div class="btn-item margin-l-16" @click="handleTabChange(6)" v-if="stepStatus === 'requireOnline' && detail.processStatus === '9' && isHasWorkComp">
                        <span class="margin-r-8">完成工单</span>
                        <CheckCircleFilled class="success-color" v-if="isCanFinishOnline" />
                        <CloseCircleFilled class="error-color" v-else />
                    </div>
                    <div class="btn-item margin-l-16" @click="handleTabChange('RelateTime')">
                        <span class="margin-r-8">研发周期</span>
                        <CheckCircleFilled class="success-color" v-if="isHasSetTime" />
                        <CloseCircleFilled class="error-color" v-else />
                    </div>
                </flexbox>
            </div>
            <flexbox style="line-height: 80px; padding-right: 16px">
                <flexbox align="center">
                    <a-button @click="handlePreview(0)" v-if="!disabled">预览评审表<ZoomInOutlined /></a-button>
                </flexbox>
                <div class="margin-l-8" v-if="stepStatus">
                    <template v-if="['productAudit', 'devReview'].includes(stepStatus)">
                        <a-button @click="handleShowReview" :disabled="processDisabled">评审</a-button>
                    </template>
                    <template v-if="stepStatus === 'productChange' && hasAuth">
                        <a-button :disabled="!(relateFileInfo.connectType && relateFileInfo.isUploadFile)" @click="handleNextProcess({ type: 3, pass: '是' })">提交</a-button>
                    </template>
                    <!-- 基线 -->
                    <template v-if="stepStatus === 'basicLine'">
                        <a-button :disabled="!(hasAuth && relateFileInfo.connectType && relateFileInfo.isUploadFile && detail.autoTest !== null && testStatus !== 3)" @click="handleNextProcess({ type: 3 })">下一步</a-button>
                    </template>
                    <!-- 需求研发 -->
                    <template v-if="stepStatus === 'requireDev'">
                        <flexbox>
                            <div v-if="hasAuth">
                                <a-button disabled v-if="detail.nodeFlg === '1'">已完成开发</a-button>
                                <a-popconfirm placement="left" ok-text="确认" cancel-text="取消" @confirm="handleDoneTask" v-else>
                                    <template v-slot:title>
                                        <span>该操作不可逆，请确认是否完成</span>
                                    </template>
                                    <a-button>完成开发</a-button>
                                </a-popconfirm>
                            </div>
                            <!-- 自动体测 -->
                            <!-- 1.已中止，进行中或者已完成 2.已驳回 -->
                            <a-button
                                class="margin-l-8"
                                @click="handleNextProcess({ type: 3 })"
                                v-if="detail.pmpTestInformationDTO && detail.pmpTestInformationDTO.allRequestStatus && detail.pmpTestInformationDTO.allRequestStatus.length"
                                :disabled="!(hasAuth && detail.nodeFlg === '1' && (detail.pmpTestInformationDTO.allRequestStatus.includes('已中止') || detail.pmpTestInformationDTO.allRequestStatus.includes('进行中') || detail.pmpTestInformationDTO.allRequestStatus.includes('已完成') || (testVersionList.length > 1 && testStatus === 3) || detail.autoTest === false))"
                            >
                                下一步
                            </a-button>
                            <!-- 不自动提测 -->
                            <a-button class="margin-l-8" @click="handleNextProcess({ type: 3 })" v-else :disabled="!(hasAuth && detail.nodeFlg === '1' && detail.autoTest === false)"> 下一步 </a-button>
                        </flexbox>
                    </template>
                    <!-- 外采 -->
                    <template v-if="stepStatus === 'outSide'">
                        <a-button class="margin-l-8" @click="handleNextProcess({ type: 3 })" :disabled="!(hasAuth && (relateFileInfo.connectType ? relateFileInfo.isUploadFile : true) && (isAutoTest ? [2, 4].includes(testStatus) || (testVersionList.length > 1 && testStatus === 3) : detail.autoTest === false))"> 下一步 </a-button>
                    </template>
                    <!-- 需求测试 -->
                    <template v-if="['requireTest'].includes(stepStatus)">
                        <!-- 只有自动提测需要审批测试报告 -->
                        <a-button :disabled="!(hasAuth && (relateFileInfo.connectType ? relateFileInfo.isUploadFile : true) && (canReviewTestReport || detail.autoTest === false))" @click="handleShowReviewTestReport" v-if="isAutoTest">评审测试报告</a-button>
                        <a-button :disabled="!(hasAuth && (relateFileInfo.connectType ? relateFileInfo.isUploadFile : true) && (testStatus === 4 || detail.autoTest === false))" @click="handleNextProcess({ type: 3 })" v-else>下一步</a-button>
                    </template>
                    <!-- 产品经理验收 -->
                    <template v-if="['productManagerReview'].includes(stepStatus)">
                        <a-button @click="handleNextProcess({ type: 3 })" :disabled="!hasAuth">下一步</a-button>
                    </template>
                    <!-- 验收 -->
                    <template v-if="stepStatus === 'teamLeaderAduit'">
                        <a-button :disabled="!hasAuth" @click="handleShowReview">评审</a-button>
                    </template>
                    <!-- 上线 -->
                    <template v-if="stepStatus === 'requireOnline'">
                        <a-button :disabled="!(hasAuth && isCanFinishOnline && (relateFileInfo.connectType ? relateFileInfo.isUploadFile : true))" @click="handleNextProcess({ type: 3 })">完成</a-button>
                    </template>
                </div>
                <div class="margin-l-8" v-else>
                    <a-button @click="handleNextProcess({ type: 2 })" :disabled="!(hasAuth && isRelatePro && isHasSetTime && (relateFileInfo.connectType ? relateFileInfo.isUploadFile : true))">发起评审</a-button>
                </div>
            </flexbox>
        </flexbox>
    </div>
</template>

<script lang="ts">
import { ZoomInOutlined, CheckCircleFilled, CloseCircleFilled, LoadingOutlined } from '@ant-design/icons-vue';
import { defineComponent, getCurrentInstance, computed } from 'vue';
export default defineComponent({
    props: {
        detail: {
            type: Object,
            default: () => ({})
        },
        disabled: { type: Boolean, default: false },
        stepStatus: { type: String, default: '' },
        stage: { type: String, default: '' },
        hasAuth: {
            type: Boolean,
            default: false
        },
        historyList: {
            type: Array,
            default: () => []
        },
        testVersionList: {
            type: Array,
            default: () => []
        },
        relateFileInfo: {
            type: Object,
            default: () => ({})
        },
        isRelatePro: {
            type: Boolean,
            default: false
        },
        isHasWorkComp: {
            type: Boolean,
            default: false
        },
        testStatus: {
            type: Number,
            default: 0
        },
        processDisabled: {
            type: Boolean,
            default: false
        },
        isCanFinishOnline: {
            type: Boolean,
            default: false
        },
        isAutoTest: {
            type: Boolean,
            default: false
        }
    },
    components: {
        ZoomInOutlined,
        CheckCircleFilled,
        CloseCircleFilled,
        LoadingOutlined
    },
    emits: ['changeTab'],
    setup(props, { emit }) {
        const parent: any = getCurrentInstance()?.parent;
        // 需求测试节点针对自动提测的，需要做判断才能进行下一步到验收节点
        const canReviewTestReport = computed(() => {
            //不存在中间状态（“待审核”、“未开始”、“进行中”、“已挂起”）的测试版本
            const res = props.testVersionList.some((item: any) => ['待审核', '未开始', '进行中', '已挂起'].includes(item.auditLabel));
            if (res) {
                return false;
            } else {
                //仅当存在一个“已完成”+“已归档”或“已中止”+“已归档”的测试版本
                const arr = props.testVersionList.filter((item: any) => (item.requestStatus === '已完成' || item.requestStatus === '已中止') && item.auditLabel === '已归档');
                if (arr.length) {
                    return arr.length >= 1 ? true : false;
                } else {
                    return false;
                }
            }
        });
        const isHasSetTime = computed(() => {
            const { randdPlanEndTime, testPlanStartTime } = props.detail;
            console.log(randdPlanEndTime, testPlanStartTime);
            return randdPlanEndTime && testPlanStartTime;
        });
        const showReviewRecord = computed(() => {
            // 产品经理修改
            if (props.stepStatus === 'productChange') {
                return !!props.detail.files.find((item) => ['产品内部评审记录', '研发评审记录'].includes(item.connectType));
            }
            // 产品经理验收
            if (props.stepStatus === 'productManagerReview') {
                // 判断有没有团队长审核记录文件，有文件说明被驳回
                return !!props.detail.files.find((item) => item.connectType === '团队长审核记录');
            }
            return false;
        });
        const handleNextProcess = (query) => {
            parent.proxy.handleNextProcess(query);
        };
        const handleShowReview = (query) => {
            parent.proxy.handleShowReview(query);
        };
        const handleShowReviewTestReport = (query) => {
            parent.proxy.handleShowReviewTestReport(query);
        };
        const handlePreview = (query) => {
            parent.proxy.handlePreview(query);
        };
        const handleDoneTask = () => {
            parent.proxy.handleDoneTask();
        };
        const handleTabChange = (query) => {
            if (props.relateFileInfo.connectType === '测试报告' && !props.relateFileInfo.isUploadFile) {
                emit('changeTab');
            } else {
                parent.proxy.handleTabChange(query);
            }
        };
        return {
            showReviewRecord,
            handleNextProcess,
            handleShowReview,
            handleShowReviewTestReport,
            handlePreview,
            handleDoneTask,
            handleTabChange,
            canReviewTestReport,
            isHasSetTime
        };
    }
});
</script>

<style scoped lang="less">
.process-cont {
    width: 100%;
    height: 80px;
    background: @primary-color;
    border-radius: 8px;
    margin-top: 17px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
    .btn-item {
        border-radius: 12px;
        padding: 0 12px;
        background: #fff;
        color: #000;
        font-size: 13px;
    }
}
</style>